<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单配置</title>
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
<link rel="stylesheet"
	href="/three/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
</head>
<body>
	<form action="/three/menu/list" method="post" id="form1">
		<div class="pos-a"
			style="width: 200px; left: 0; top: 0; bottom: 0; height: 100%; border-right: 1px solid #e5e5e5; background-color: #f5f5f5; overflow: auto;">
			<ul id="tree" class="ztree"></ul>
		</div>
		<div style="margin-left: 200px;">
			<div class="pd-20">
				<div class="text-c">
					<input class="input-text" type="text" name="mname"
						placeholder="菜单名称" style="width: 250px;">
					<c:if test="${fn:contains(power,'menu/list') }">
						<button type="submit" class="btn btn-primary">
							<i class="Hui-iconfont">&#xe665;</i>查询
						</button>
					</c:if>
					<button class="btn btn-primary" type="button" id="btn_reset">
						<i class="Hui-iconfont">&#xe68f;</i>重置
					</button>
				</div>
				<c:if test="${fn:contains(power,'menu/save') }">
					<div class="cl pd-5 bg-1 bk-gray mt-20">
						<span class="l">
							<button class="btn btn-primary" id="btn_add" type="button">
								<i class="Hui-iconfont">&#xe600;</i>菜单新增
							</button>
						</span>
					</div>
				</c:if>
				<table
					class="table table-border table-bordered table-hover table-bg table-sort">
					<thead>
						<tr class="text-c">
							<th>菜单名称</th>
							<th>菜单URL</th>
							<th>菜单类型</th>
							<th>自动展开</th>
							<th>排序号</th>
							<th>节点图标</th>
							<th>当前状态</th>
							<th>编辑模式</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${menuList }" var="menu">
							<tr class="text-c va-m">
								<td>${menu.menuName }</td>
								<td>${menu.url }</td>
								<td>${menu.menuType=='1'?'系统菜单':'商家菜单' }</td>
								<td>${menu.isAutoExpand==1?"是":"否" }</td>
								<td>${menu.sortNo }</td>
								<td>${menu.iconName }</td>
								<td>${menu.status=='1'?'启用':'停用' }</td>
								<td>${menu.editMode=='1'?'可编辑':'只读' }</td>
								<td class="f-14 user-manage"><c:if
										test="${fn:contains(power,'menu/update') }">
										<a style="text-decoration: none"
											onclick='toupdate(${el:toJsonString(menu)})' title="编辑"><i
											class="Hui-iconfont">&#xe6df;</i></a>
									</c:if> <c:if test="${fn:contains(power,'menu/delete') }">
										<a style="text-decoration: none" class="ml-5"
											href="/three/menu/delete?menuId=${user.userId }" title="删除"><i
											class="Hui-iconfont">&#xe6e2;</i></a>
									</c:if></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</form>
	<form action="" method="post" id="menuform">
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">菜单配置更新</h3>
						<a class="close" id="btn_gb" data-dismiss="modal"
							aria-hidden="true" href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="menuId" id="menuId" value=""
							class="input-text" />
						<table class="table">
							<tr>
								<td>菜单名称</td>
								<td><input type="text" name="menuName" id="menuName"
									value="" class="input-text radius" /></td>
								<td>上级菜单</td>
								<td>
									<div style="width: 190px;">
										<input id="citySel" class="input-text radius" type="text"
											onclick="showMenu(); return false;" readonly value=""
											style="width: 165px;" />
										<div style="float: right; margin-top: 4px;"
											onclick="showMenu();">选择</div>
									</div> <input id="treeids" type="hidden" name="parentId"
									class="input-text radius">
									<div id="menuContent" class="menuContent"
										style="display: none; position: absolute;">
										<ul id="treeDemo" class="ztree"></ul>
									</div>
								</td>
							</tr>
							<tr>
								<td>菜单url</td>
								<td><input type="text" name="url" id="url" value=""
									class="input-text radius" /></td>
								<td>节点图标</td>
								<td><input type="text" name="iconName" id="iconName"
									value="" class="input-text radius" /></td>
							</tr>
							<tr>
								<td>菜单类型</td>
								<td><select name="menuType" class="input-text radius"
									style="width: 195px;">
										<option value="1" selected="selected">系统菜单</option>
										<option value="2">商家菜单</option>
										<option value="3">功能按钮</option>
								</select></td>
								<td>自动展开</td>
								<td><select name="isAutoExpand" class="input-text radius"
									style="width: 195px;">
										<option value="1" selected="selected">是</option>
										<option value="0">否</option>
								</select></td>
							</tr>
							<tr>
								<td>当前状态</td>
								<td><select name="status" class="input-text radius"
									style="width: 195px;">
										<option value="1">启用</option>
										<option value="0">停用</option>
								</select></td>
								<td>编辑模式</td>
								<td><select name="editMode" class="input-text radius"
									style="width: 195px;">
										<option value="1">可编辑</option>
										<option value="0">只读</option>
								</select></td>
							</tr>
							<tr>
								<td>排序号</td>
								<td>
									<div style="width: 190px;">
										<div id="subtraction" style="float: left; margin-top: 5px;">
											<i class="Hui-iconfont">&#xe6a1;</i>
										</div>
										<input type="text" class="btn disabled radius" id="number"
											name="sortNo" value="1" style="width: 165px;">
										<div id="add" style="float: right; margin-top: 5px;">
											<i class="Hui-iconfont">&#xe600;</i>
										</div>
									</div>
								</td>
								<td>备注</td>
								<td><textarea name="remark" rows="7" cols="22" name=""
										class="textarea radius"></textarea></td>
							</tr>

						</table>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_save">保存</button>
						<button class="btn" id="btn_close" data-dismiss="modal"
							aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</form>
</body>
<script type="text/javascript"
	src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript"
	src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="/three/static/formEdit.js"></script>
<script type="text/javascript"
	src="/three/lib/zTree/v3/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript"
	src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript"
	src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript"
	src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
$('.table-sort').dataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"pading":false,
	"aoColumnDefs": [
	  {"orderable":false,"aTargets":[0,8]}// 不参与排序的列
	]
});
$("#menuform").validate({
	rules:{
		menuName:{
			required:true,
			minlength:4,
			maxlength:16
		}
	},
	onkeyup:false,
	focusCleanup:true
});
/*点击重置按钮开始*/
$("#btn_reset").click(function() {
	$("#mname").val("");
});
/*点击重置按钮结束*/
/*点击关闭和close清空数据开始*/
$("#btn_gb,#btn_close").click(function() {
	$(".input-text").val("");
	$(".textarea").val("");
	$("#number").val("1");
	
});
/*点击关闭和清空数据结束*/
/* 点击保存以后操作开始 */
$("#btn_save").click(function() {
	var menuValue = $("#menuId").val();
	var parentvalue = $("#treeids").val();
	if(menuValue == null || menuValue == "") {
		if(parentvalue==null||parentvalue=="") {
           alert("请选择上级菜单!!!");
		} else {
			$("#menuform").attr("action", "/three/menu/save");
			$("#menuform").submit();
		}
	} else {
		if(parentvalue == menuValue ||parentvalue==null || parentvalue == "") {
				alert("菜单配置错误!!!");
			} else {
				$("#menuform").attr("action", "/three/menu/update");
				$("#menuform").submit();
			}
		
	}
});
/* 点击保存以后结束 */

/*点击修改的操作开始*/
function toupdate(msg) {
	$(".input-text").val("");
	$(".textarea").val("");
	$("#number").val("1");
	$.ajax({
		type: "POST",
		url: "/three/menu/toselectParentname",
		dataType: "text",
		async: false,
		data: {
			parentId: msg.parentId
		},
		success: function(obj) {
			console.log(obj)
			$("#citySel").val(obj);
			$("#menuform").formEdit(msg);
			$("#myModal").modal("show");
		}
	});		
}
/*点击修改的操作结束*/

/*文本框焦点失去事件*/
$("#number").click(function() {
	var number = document.getElementById("number");
	var value = number.value;
	//如果文本值为空,设置为1
	if(value == "") {
		number.value = 1;
	}
	//如果文本值为非纯数字,设置为1
	//isNaN()是否为非法数字
	if(isNaN(value)) {
		number.value = 1;
	}
	//如果文本值小于1,设置为1
	if(parseInt(value) <= 1) {
		number.value = 1;
	}

});

/*加号的方法开始*/
$("#add").click(function() {
	var add = document.getElementById("add");
	var number = document.getElementById("number");
	//parseInt() 将数值型字符串转换为数值
	number.value = parseInt(number.value) + 1;
});
/*加号的方法结束*/

/*减号的方法*/
$("#subtraction").click(function() {
	//获取-号按钮
	var subtraction = document.getElementById("subtraction");
	//获取文本框
	var number = document.getElementById("number");
	if(number.value <= 1) {
		//如果文本框的值小于1,则设置值为1
		number.value = 1;
	} else {
		number.value = number.value - 1;
	}

});
/*减号的方法结束*/

$("#btn_add").click(function() {
	$("#myModal").modal("show");

});
/*主页面的菜单树*/
$.ajax({
	type: 'POST',
	dataType: "json",
	url: "/three/menu/tooMenu",
	async: false,
	success: function(data) {
		var setting = {
			data: {
				simpleData: {
					enable: true,
					idKey: "menuId",
					pIdKey: "parentId",
					rootPId: 0
				},
				key: {
					name: "menuName",
					url:"notexists"
				}
			},
			callback: {
				onClick: ztreeOnclick
			}
		}
		$(document).ready(function() {
			$.fn.zTree.init($("#tree"), setting, data);
			expandAll(); //调用写好的展开全部节点方法
		});
		var zNodes = data;
	}
});

function ztreeOnclick(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("tree"),
		nodes = zTree.getSelectedNodes(),
		ids = "";
	nodes.sort(function compare(a, b) {
		return a.id - b.id;
	});
	for(var i = 0, l = nodes.length; i < l; i++) {
		ids += nodes[i].menuId + ","; //获取选中的菜单树的id

	}
	// 将选中的id放到隐藏的文本域中
	if(ids.length > 0) ids = ids.substring(0, ids.length - 1);
	//console.log(ids);
	$("#form1").attr("action", "/three/menu/queryMenuIds?ids=" + ids);
	$("#form1").submit();
}
/*主页面的菜单树结束*/

/* 完成ztree的自动展开功能开始 */
var curStatus = "init",
	curAsyncCount = 0,
	asyncForAll = false,
	goAsync = false;

function expandAll() {

	var zTree = $.fn.zTree.getZTreeObj("tree");
	if(asyncForAll) {

		zTree.expandAll(true);
	} else {
		expandNodes(zTree.getNodes());
		if(!goAsync) {
			curStatus = "";
		}
	}
}

function expandNodes(nodes) {
	if(!nodes)
		return;
	curStatus = "expand";
	var zTree = $.fn.zTree.getZTreeObj("tree");
	for(var i = 0, l = nodes.length; i < l; i++) {
		zTree.expandNode(nodes[i], true, false, false);
		if(nodes[i].isParent && nodes[i].zAsync) {
			expandNodes(nodes[i].children);
		} else {
			goAsync = true;
		}
	}
}
/* 完成ztree的自动展开功能结束 */
/*下拉菜单开始*/
$.ajax({
	type: 'POST',
	dataType: "json",
	url: "/three/menu/queryParentId",
	async: false,
	success: function(data) {
		var inputsetting = {
			data: {
				simpleData: {
					enable: true,
					idKey: "menuId",
					pIdKey: "parentId",
					rootPId: 0
					
				},
				key: {
					name: "menuName",
					url:"notexists"
				}
			},
			callback: {
				onClick: onClick				
			}
		}
		$(document).ready(function() {
			$.fn.zTree.init($("#treeDemo"), inputsetting, data);
		});
	}
});

function onClick(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
		nodes = zTree.getSelectedNodes(),
		v = "";
	ids = "";
	nodes.sort(function compare(a, b) {
		return a.id - b.id;
	});
	for(var i = 0, l = nodes.length; i < l; i++) {
		v += nodes[i].menuName + ",";
		ids += nodes[i].menuId + ",";
		//console.log(nodes[i].deptId)
	}
	if(v.length > 0) v = v.substring(0, v.length - 1);
	$("#citySel").val(v);
	// 将选中的id放到隐藏的文本域中
	if(ids.length > 0) ids = ids.substring(0, ids.length - 1);
	$("#treeids").val(ids);
}

function showMenu() {
	$("#citySel").val("");
	var cityObj = $("#citySel");
	var cityOffset = $("#citySel").offset();

	$("#menuContent").css({
		left: "400px",
		top: "50px"
	}).slideDown("fast");
	$("body").bind("mousedown", onBodyDown);
}

function hideMenu() {
	$("#menuContent").fadeOut("fast");
	$("body").unbind("mousedown", onBodyDown);
}

function onBodyDown(event) {
	if(!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
		hideMenu();
	}
}
/*	下拉菜单结束*/
</script>
</html>